import React from 'react'

// import React, { useState, useCallback, useEffect } from 'react'
// import { useDispatch, useSelector } from 'react-redux'
// import { useHistory } from 'react-router-dom'

// import React, { Component } from 'react'
// import { connect } from 'react-redux'
// import { withRouter } from 'react-router-dom'

import PropTypes from 'prop-types'
// import { get } from '@/utils/http.js'
// import { actionCreator as ac } from '@/home/category'

import MenuList from '@c/menu/MenuList'

/*
@withRouter
@connect(
  state => ({
    cateAside: state.category.routeInfo.cateAside,
    cateType: state.category.routeInfo.cateType
  }),
  dispatch => ({
    changeCateAside(cateAside) {
      dispatch(ac.changeCateAside(cateAside))
    },
  })
)
class Menu extends Component {
  static propTypes = {
    type: PropTypes.string
  }

  state = {
    // cate: null,
    cate: [],
    // type: 'category',
    // curCate: this.props.type === 'category' ? '热门' :'肉类'
  }
  // curCate 内部组件外部组件都会修改
  // static getDerivedStateFromProps(nextProps, preState) {
  //   if (nextProps.type === preState.type ) {
  //       return null
  //   } else {
  //     return {
  //       curCate: nextProps.type === 'category' ? '热门' :'肉类',
  //       type: nextProps.type // 保存一下父组件上次传过来的状态
  //     }
  //   }
  // }

  async componentDidMount() {
    let result = await get({
      url: '/api/category'
    })
    this.setState({
      cate: result.data.data
    })

    if(this.props.cateAside === '') {
      this.props.changeCateAside(this.props.cateType === 'category' ? '热门' :'肉类')
    }
  }

  handleAsideClick = (curCate) => {
    return () => {
      // this.setState({
      //   curCate
      // })
      this.props.changeCateAside(curCate)
    }
  }

  handleGoToList = (title) => {
    return () => {
      this.props.history.push('./list', { title })
    }
  }
  
  // Object.keys(this.state.cate['category']) 取出key时 顺序是否变化了
  // 父组件render渲染子组件一定渲染，所以在这里区分数据分类；curCate 写在这里面，听从父组件指挥，但是子组件不合适
  render() {
    return (
      // null
      <MenuList 
      // cate={ this.state.cate && this.state.cate[this.props.type]}
      cate={ this.state.cate && this.state.cate[this.props.cateType]}
      onAsideClick={this.handleAsideClick} 
      // curCate={this.state.curCate}
      curCate={this.props.cateAside}
      onGoToList={this.handleGoToList}></MenuList>
    )
  }
}
*/
import useCateChange from './useCateChange'
import useGoToList from './useGoToList'

const Menu = (props) => {
  let { cate, cateType, cateAside, handleAsideClick } = useCateChange()
  let  { handleGoToList } = useGoToList()

  return (
    // null
    <MenuList 
    // cate={ this.state.cate && this.state.cate[this.props.type]}
    cate={ cate && cate[cateType]}
    onAsideClick={handleAsideClick} 
    // curCate={this.state.curCate}
    curCate={cateAside}
    onGoToList={handleGoToList}></MenuList>
  )
}

Menu.prototype = {
  type: PropTypes.string
}

export default Menu
